<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content="Li is a real-time collaborative todo list."/>

    <link rel="shortcut icon" type="image/gif" href="favicon.gif"/>

    <title>Li</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
    <script type="text/javascript" src="js/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="tinyeditor/tinyeditor.js"></script>
    <link href="tinyeditor/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header>
  <div id="header">
    <div id="status" data-bind="html: statusMessage"></div>
    <!-- ko if: (typeof children()[0] != 'undefined' && children()[0]._id != 'root' && children()[0].parent_id != 'root') -->
    <a data-bind="attr: {href: '#/' + children()[0].parent_id}" title="Up">&uArr;</a>
    <!-- /ko -->
    <!-- ko if: (typeof children()[0] != 'undefined' && children()[0]._id != 'root') -->
    <a data-bind="attr: {href: '#/'}" title="Home">&#x2302;</a>
    <!-- /ko -->
  </div>
</header>

<div id="page" style="display:block">
  <div class="sidebar">
    <ul class="notes" data-bind="if: typeof children()[0] != 'undefined'">
      <li class="notes">Child notes:</li>
      <!-- ko foreach: notes -->
      <li class="notes"><a data-bind="html: name, attr: {href: '#/' + _id}"></a></li>
      <!-- /ko -->
      <li class="notes">Add:</li>
      <li id="new-wrapper">
          <input id="new" type="text" maxlength="256" data-bind="value: newItem, css: {loading: newItemLoading}, attr: {readonly: newItemLoading}"/>
      </li>
      <li class="notes">Search:</li>
      <li id="search"><input type="text" maxlength="256" data-bind="value: search, css: {loading: searching}, attr: {readonly: searching}"/></li>
      <!-- ko foreach: searchItems -->
      <li class="notes" data-bind="if: typeof children != 'undefined'"><a data-bind="html: children[0].name, attr: {href: '#/' + children[0]._id}"></a></li>
      <!-- /ko -->
    </ul>  
  </div>
  <div id="main">
    <div id="list" data-bind='template: {name: "todo-template", foreach: children}'></div>
    <ul class="attachments" data-bind="if: typeof children()[0] != 'undefined'">
      <!-- ko foreach: attachments -->
      <li class="attachment"><a data-bind="text: name, attr: {href: app.baseUrl + '../../api/' + $parent.children()[0]._id + '/' + name}"/></li><a data-bind="click: remove">&#x2717;</a>
      <!-- /ko -->
      <input type="file" id="files" name="files[]" data-bind="event: {change: handleFileSelect}"/>
    </ul>
  </div>
</div>

<div id="not-found" style="display: none">
    <h1>There is nothing at this location.</h1>

    <p><a id="create" data-bind="click: function() {create(root, function(error, doc) { $('div#not-found').hide(); load()})}">Would you like me to create a LIst here?</a></p>
</div>

<div id="password-protect" class="overlay" style="display:none">
    <div class="password">
        <label>What password would you like to use?</label>
        <input type="password" name="" value=""/>
        <a href="#" class="close" data-action="close">cancel</a>
        <span></span>
    </div>
</div>

<div id="password-authenticate" class="overlay" style="display:none">
    <div class="password">
        <label>Password?</label>
        <input type="password" name="" value=""/>
    </div>
</div>

<footer>
    <p>li.iriscouch.com &middot; <a data-action="about"
                                    data-bind="click: function() { $('div#about').toggle() }">about</a> &middot; <a
            href="http://github.com/avalez/li.couch">source</a></p>

    <div id="about" style="display: none">
        <p>
            Hi there, my name is Li. I am collaborative notes LIst.
        </p>

        <p>
            I'm created as a pure <a href="http://couchapp.org">Couch Application</a> by
            <a href="mailto:azhdanov@gmail.com">Andriy Zhdanov</a>.
            I'm powered by <a href="http://couchdb.apache.org">CouchDB</a> and was built entirely in JavaScript,
            using <a href="http://knockoutjs.com/">Knockout</a>. I'm running on <a href="">Iris Couch</a> - &quot;easy cloud CouchDB&quot;.
            My <a href="http://github.com/avalez/li.couch">code</a> is
            available and open-source &mdash; feel free to browse and fork!
        </p>
    </div>
    <p>Copyright &copy; 2011-212 <a href="mailto:azhdanov@gmail.com">Andriy Zhdanov</a></p>
</footer>

<script type="text/html" id="todo-template">
    <div>
        <div class="editable" data-bind="htmlValue: name"/>
        <div class="actions actions1">
            <a data-bind="click: edit">&#x270E;</a>
            <a data-bind="click: remove">&#x2717;</a>
        </div>
        <div class="actions actions2">
            <a data-bind="css: {loading: loading}" style="visibility: visible">&nbsp;&nbsp;&nbsp;</a>
            <a data-bind="click: $parent.add">&#x271A;</a>
        </div>
    </div>
</script>
</body>
</html>
